<template>
  <div class="detail">
      <h1>{{ this.title }}</h1>
      <p class="uploads-date">上传于{{ this.uploadsDate }}</p>
      <img :src="image" v-if="this.type == 'image'"/>
      <video :src="video" type="video/mp4" controls="controls" v-else-if="this.type == 'video'">
      </video>
  </div>
</template>

<script>
export default {
    name: 'Detail',
    props: {
        title: {
            default: ''
        },
        uploadsDate: {
            default: ''
        },
        image: {
            default: ''
        },
        video: {
            default: ''
        },
        type: {
            default: 'image'
        }
    }
}
</script>

<style lang="less" scoped>
.detail {
    width: 90%;
    display: block;
    margin: 0 auto;

    h1 {
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        line-height: 6rem;
        border-bottom: .1rem solid #ddd;
    }

    .uploads-date {
        font-size: 1.4rem;
        color: #ccc;
        line-height: 4rem;
        margin-left: 5%;
    }

    img,
    video {
        width: 100%;
    }
}
</style>

